<template>
  <div class="root">
    <el-form ref="form" :model="form" style="" label-width="80px">
        <div>
      <div
        v-for="(item, index) in data_select"
        style="display: flex"
        :key="index"
      >
        <div v-for="item in item.fields">
          <div style="display: flex">
            <span class="label">
              {{ item.label }}
            </span>
            <div class="elUI">
              <el-input
                v-if="item.ui_component == 'input'"
                v-model="form[item.key]"
              ></el-input>
              <el-date-picker
                v-else-if="item.ui_component == 'date'"
                type="date"
                placeholder="选择日期"
                v-model="form[item.key]"
              >
              </el-date-picker>
              <el-time-select
                v-else-if="item.ui_component == 'datetime'"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30',
                }"
                :placeholder="item.placeholder"
                v-model="form[item.key]"
              >
              </el-time-select>

              <el-select
                v-model="form[item.key]"
                :placeholder="item.placeholder"
                v-else-if="item.ui_component == 'select-single'"
              >
                <el-option
                  v-for="op in item.options"
                  :key="op.label"
                  :label="op.label"
                  :value="op.value"
                >
                </el-option>
              </el-select>
              <el-select
                :placeholder="item.placeholder"
                v-else-if="item.ui_component == 'select-multi'"
                multiple="true"
                v-model="form[item.key]"
              >
                <el-option
                  v-for="op in item.options"
                  :key="op.value"
                  :label="op.label"
                  :value="op.value"
                >
                </el-option>
              </el-select>

              <el-input
                v-else-if="item.ui_component == 'textarea'"
                type="textarea"
                v-model="form[item.key]"
              ></el-input>
              <el-radio
                v-else-if="item.ui_component == 'radio'"
                v-for="ra in item.options"
                v-model="form[item.key]"
                :key="ra.value"
                :label="ra.value"
                style="width: 50px"
              >
                {{ ra.label }}
              </el-radio>
            </div>
          </div>
        </div>
        <el-button size="medium" style="width:70px;height:36px" type="primary" @click="say"
          >查询</el-button
        >
      </div>
       
      </div>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import { getSelect } from "../api/testApi";
import qs from "qs";
export default {
  props: ["actionData"],
  data() {
    return {
      data_select: {},
      input: {},
      value: [],
      inputArr: [],
      dateArr: [],
      datetimeArr: [],
      singleArr: [],
      multiArr: [],
      radioArr: [],
      areaArr: [],
      query: {
        _id: "5fdac51570a56dffacfd8fbb",

        company_id: "abc",

        app_id: "abc",

        modul_id: "bbc",

        role_id: "222",

        layout_id: "888888",
      },
      form: {},
    };
  },
  methods: {
    test() {
      getSelect(this.actionData.path, this.query).then((response) => {
        this.data_select = response.data.data.filter.lines;
      });
    },

    say() {
      this.actionData.postData = this.form;
      let urlData = qs.stringify({
        postData: JSON.stringify(this.actionData.postData),
      });
      getSelect(this.actionData.path, urlData).then((response) => {
        console.log(this.response);
      });
    },
  },

  mounted() {
    this.test();
  },
};
</script>

<style  scoped>
.root {
  /* display: flex; */
  /* flex-direction: row; */
  min-width: 960px;
}
.label {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 50px;
}

.elUI {
  /* display: flex; */
  margin: 10px 10px;
  min-width: 140px;
}
</style>